<template>
  <view>
    <l-drag
      :list="initList"
      @change="change"
      :column="4"
      ref="dragRef"
      after
      remove
      gridHeight="200rpx">
      <!-- content 数据对象  -->
      <!-- active 是否为当前拖拽项目 根据自己需要写样式 -->
      <!-- index 排序后列表下标 -->
      <!-- oldindex 排序后列表旧下标 -->
      <!-- oindex 列表原始下标，输入的数据排位不会因为排序而改变 -->

      <template #grid="{ active, content, index, oldindex, oindex }">
        <view
          style="
            box-sizing: border-box;
            border: 1px solid #6c0fdc;
            background: #00000010;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
          "
          :class="{ 'text-active': active }">
          <view style="padding: 10px; background: #bdcf1950">
            <view>
              {{ content.name }}
            </view>
            <view
              class="remove"
              @click="delItem(oindex)"
              style="color: #093eec; font-weight: bold">
              删除
            </view>
          </view>
        </view>
      </template>

      <template #after>
        <view
          style="
            color: #d31919;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #22cdd3;
            height: 200rpx;
          ">
          <view class="inner extra" @click="addItem">增加</view>
        </view>
      </template>
    </l-drag>
  </view>
</template>

<script>
export default {
  data() {
    return {
      nowList: [],
      initList: [
        { id: 1, name: 111 },
        { id: 2, name: 222 },
        { id: 3, name: 333 },
        { id: 4, name: 444 },
        { id: 5, name: 555 },
        { id: 6, name: 666 },
        { id: 7, name: 777 },
        { id: 8, name: 888 },
        { id: 9, name: 999 },
      ],
    };
  },
  methods: {
    addItem(e) {
      console.log("新增记录----------------->", e);
      let item = {
        id: Math.round(Math.random() * 1000),
        name: Math.round(Math.random() * 1000),
      };
      this.$refs.dragRef.push(item);
    },
    //回传的数据，应该是nowList 当前数据
    change(v) {
      console.log("已修改：修改后的信息----------------->", v);
      this.nowList.value = v;
    },
    delItem(oindex) {
      console.log("删除数据----------------->", oindex);
      if (this.$refs.dragRef && oindex >= 0) {
        // 记得oindex为数组的原始index
        this.$refs.dragRef.remove(oindex);
      }
    },
  },
};
</script>

<style></style>
